{extend name="base"}
{block name="style"}
<!-- 这里允许在引入一些样式头部 -->
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="{:_static()}/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
<link rel="stylesheet" href="{:_static()}/css/device.css" media="all" />
<link rel="stylesheet" href="{:_static()}/css/common.css" media="all" />
{/block}

{block name="main"}
<style type="text/css">
	.ws-main{padding: 15px;}
	a:hover{color: inherit !important;}
	label{box-sizing: content-box;}
</style>

<div class="childrenBody account-list">
	<div class="layui-inline layui-form">
		<div class="layui-form-item filter">
		    <div class="tab-head">
		    	<label class="layui-form-label"><strong>目标筛选</strong></label>
			    <div class="layui-input-block">
			    <span class="filter-menu"><input class="filter-item" type="radio" name="select" value="所有手机" title="所有手机" checked=""></span>
			      
			      <span class="filter-menu"><input class="filter-item" type="radio" name="select" value="手机分组" title="手机分组" ></span>
			      <span class="filter-menu"><input class="filter-item" type="radio" name="select" value="微信号分组" title="微信号分组" ></span>
			    </div>
		    </div>
		    <div class="tab-body">
		    	<div class="tab-cont on"><div class="info">暂无数据</div></div>
		    	<div class="tab-cont"><div class="info">您还没有分组,快去设置分组吧 <a class="layui-btn layui-btn-mini" href="##">去设置</a></div></div>
		    	<div class="tab-cont"><div class="info">暂无数据3</div></div>
		    </div>
	  	</div>
	</div>
	<div class="layui-form">
		<div class="layui-form-item" pane="">
			<label class="layui-form-label account-num">本页数据：</label>
		    <label class="layui-form-label account-num">账号总数：<span>0</span></label>
		    <label class="layui-form-label account-num">好友总数：<span>0</span></label>
		    <label class="layui-form-label account-num">今日新增好友：<span>0</span></label>
		    <label class="layui-form-label account-num">群聊总数：<span>0</span></label>
		    <label class="layui-form-label account-num">在线账号：<span>0</span></label>
		    <label class="layui-form-label account-num">离线账号：<span>0</span></label>
		</div>
	  <table class="layui-table">
	    <thead>
	      <tr>
	        <th>编号</th>
	        <th>微信昵称</th>
	        <th>账号状态</th>
	        <th>所属设备及编号</th>
	        <th>好友数量</th>
	        <th>男女好友占比</th>
	        <th>群聊数量</th>
	        <th>今日新增</th>
	      </tr> 
	    </thead>
	    <tbody>
	      <tr>
	        <td>1</td>
	        <td>文字</td>
	        <td>文字</td>
	        <td>文字</td>
	        <td>文字</td>
	        <td>文字</td>
	        <td>文字</td>
	        <td>文字</td>
	      </tr>
	    </tbody>
	  </table>
	  <!-- 分页 -->
	  <div id="pagination1"></div>
	</div>
	<div id="page"></div>
</div>

<script type="text/javascript" src="{:_static()}/layui/layui.js"></script>
<script type="text/babel" src="{:_static()}/js/common.js"></script>

<!-- 导入Excel -->
<link rel="stylesheet" href="{:_static()}/wsvue/index.css">
<script type="text/babel" src="{:_static()}/wsvue/excel/index.js"></script>
<script type="text/babel" src="{:_static()}/wsvue/model/index.js"></script>

<script type="text/babel" type="text/javascript">
layui.config({
	//base : "js/"
}).use(['form','layer','jquery','laypage','upload','laydate'],function(){
	let form = layui.form(),
		layer = parent.layer === undefined ? layui.layer : parent.layer,
		laypage = layui.laypage,
		laydate = layui.laydate,
		$ = layui.jquery,
		taskName={},
		store={}, // 一个容器
		files=[]; // 文件上传表单
	// 文件上传
	util.uploads(["{:url('loads')}","{:url('delImage')}"],$,function(data){
		let id=data.id,link=data.link;
		files.push(id);
	}).then(id=>{
		files.forEach((item,i)=>{
			if(item==id){
				delete files[i];
			}
		})
		console.log(files);
	})



	$(document).on("click", ".row1 .tab-head .filter-menu", function(){
		let index = $(this).index();
		$(".row1 .tab-body .tab-cont").eq(index).addClass("on")
			.siblings().removeClass("on");
	});

	$(document).on("click", ".row2 .tab-head .filter-menu", function(){
		let index = $(this).index();
		$(".row2 .tab-body .tab-cont").eq(index).addClass("on")
			.siblings().removeClass("on");
	});

	// 目标设备筛选 全选/取消 按钮处理
	$(document).on('click','.dev_select_all',function(){
		let input=$(this).closest('.tab-cont').find('input[type="checkbox"]'),
			checked=input.filter(':checked');
		if(input.length>checked.length){
			input.prop('checked',true);
		}else{
			input.prop('checked',false);
		}
		form.render('checkbox');
	})

	// 载入 右边内容区
	$(".task-item .layui-btn").click(function(){
		let _this = $(this),name = _this.data("task"),title=_this.text().trim();
		if(taskName.name!==name){
			let task={name,title};
			taskName=task;
			let event=_this.data('event'),action=_this.data('action');
			$('#_event').val(event);
			$('#_action').val(action);
			_this.addClass("layui-btn-normal").removeClass("layui-btn-primary")
				.siblings().removeClass("layui-btn-normal").addClass("layui-btn-primary")
				.parents().siblings().find(".layui-btn").removeClass("layui-btn-normal").addClass("layui-btn-primary");
			initTaskHtml(task);
		}
	});
	function initTaskHtml(task){
		if(files.length){
			// 删除 图片(待完善)
			files=[];
		}
		$.ajax({
			url: "{:url('taskHtml')}",
			type: "GET",
			success: function(data){
				let result = $(data).find(".task-cont-"+task.name); //***//
				$(result).find('.task_title').val(task.title)
				$(".task-right").html(result);
				form.render();
				layui.upload();
			}
		});
	}

	//创建任务
	form.on("submit(cteate)",function(data){
		let dev=[],field=data.field;
		for(let item in data.field){
			if(item.indexOf('dev[')>=0){
				dev.push(data.field[item]);
			}
		}
		field.dev=dev;
		field.files=files;
		$.post("{:url('')}",field,function(rs){
			util.o(rs,true).then(data=>{
				initTaskHtml(taskName);
				//parent.location.reload(true);
			})
		})
		return false;
	})

	// 导入Excel
	const myapp=new Vue({
		el:'#vue',
		data:{
			options:['微信号、QQ号、手机号'],
			show:false,
			title:'导入QQ号',
			area:['450','400'],
		},
		created(){
			// 导入Excel
			let self=this;
			$(document).on('click','.ws-import',function(){
				self.show=true;
			})
		},
		methods:{
			change(data){
				let numberStr=this.format(data);
				$('textarea.ws-import-friends-number').val(numberStr);
				this.show=false;
			},
			error(ext){
				layer.msg('错误的文件后缀名：'+ext)
			},
			format(data){
				let rs=[];
				data.forEach(item=>{
					if(item[0])rs.push(item[0]);
				});
				return rs.join('|')
			}
		}
	})
})

</script>

{/block}